<!--vue 使用tinymce富文本编辑器-->
<!--1、组件方式：-->
<!--https://www.cnblogs.com/dayin1/p/13582087.html-->
<!--https://www.cnblogs.com/zhongchao666/p/11142537.html-->
<!--插入地图：https://blog.csdn.net/chengxiangbai/article/details/103709942-->

<!--<template>-->
<!--  <div class="mod-demo-ueditor">-->
<!--    <el-alert-->
<!--      title="提示："-->
<!--      type="warning"-->
<!--      :closable="true">-->
<!--      <div>-->
<!--        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>-->
<!--        <p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>-->
<!--      </div>-->
<!--    </el-alert>-->
<!--    <div class="tinymce-editor">-->
<!--      <editor id="tinymce"-->
<!--                        v-model="myValue"-->
<!--                        :init="init"-->
<!--                        :key="tinymceFlag">-->
<!--    </editor>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import tinymce from 'tinymce/tinymce'-->
<!--  import Editor from '@tinymce/tinymce-vue'-->
<!--  import 'tinymce/themes/silver'-->
<!--  import 'tinymce/themes/silver/theme'-->
<!--  import 'tinymce/icons/default/icons'-->

<!--  // 更多插件参考：https://www.tiny.cloud/docs/plugins/-->
<!--  import 'tinymce/plugins/image'// 插入上传图片插件-->
<!--  import 'tinymce/plugins/media'// 插入视频插件-->
<!--  import 'tinymce/plugins/table'// 插入表格插件-->
<!--  import 'tinymce/plugins/lists'// 列表插件-->
<!--  import 'tinymce/plugins/wordcount'// 字数统计插件-->
<!--  import 'tinymce/plugins/textcolor'-->
<!--  import 'tinymce/plugins/advlist'-->
<!--  import 'tinymce/plugins/paste'-->
<!--  import 'tinymce/plugins/preview'-->
<!--  import 'tinymce/plugins/fullscreen'-->
<!--  import 'tinymce/plugins/save'-->

<!--  export default {-->
<!--    name: 'tinymce-hello',-->
<!--    components: {-->
<!--      Editor-->
<!--    },-->
<!--    data () {-->
<!--      return {-->
<!--        // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，-->
<!--        // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到-->
<!--        baseUrl:'static/plugins/',-->
<!--        disabled: false,-->
<!--        plugins: 'save advlist table lists paste preview fullscreen image',-->
<!--        toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen',-->
<!--        init: {-->
<!--          language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,-->
<!--          language: 'zh_CN',-->
<!--          skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,-->
<!--          content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,-->
<!--          // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系-->
<!--          // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系-->
<!--          height: 300,-->
<!--          plugins: this.plugins,-->
<!--          toolbar: this.toolbar,-->
<!--          browser_spellcheck: true, // 拼写检查-->
<!--          branding: false, // 去水印-->
<!--          elementpath: false, // 禁用编辑器底部的状态栏-->
<!--          statusbar: false, // 隐藏编辑器底部的状态栏-->
<!--          paste_data_images: true, // 允许粘贴图像-->
<!--          menubar: false, // 隐藏最上方menu-->
<!--          // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，-->
<!--          // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler-->
<!--          images_upload_handler: function (blobInfo, success, failure) {-->
<!--            const img = 'data:image/jpeg;base64,' + blobInfo.base64()-->
<!--            success(img)-->
<!--            // var formData-->
<!--            // var file = blobInfo.blob() // 转化为易于理解的file对象-->
<!--            // formData = new FormData()-->
<!--            // formData.append('file', file, file.name) // 此处与源文档不一样-->
<!--            // appRequestFile('/upload/simple?moudle=cms', formData, 'post').then((res) => {-->
<!--            //   console.log('-&#45;&#45;&#45;&#45;images_upload_handler')-->
<!--            //   console.log(res.data.data.filePath)-->
<!--            //   success(res.data.data.filePath)-->
<!--            // })-->
<!--          },-->
<!--          paste_preprocess: function (plugin, args) {-->
<!--            //粘贴图片成功，返回的args.-->
<!--            console.log('-&#45;&#45;paster' + args)-->
<!--          }-->

<!--        },-->
<!--        tinymceFlag: 1,-->
<!--        myValue: 'Welcome to Use Tinymce Editor',-->
<!--      }-->
<!--    },-->
<!--    mounted () {-->
<!--      tinymce.init({})-->
<!--    },-->
<!--    activated () {-->
<!--      this.tinymceFlag++-->
<!--    },-->
<!--    methods: {-->
<!--      // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events-->
<!--      // 需要什么事件可以自己增加-->
<!--      onClick (e) {-->
<!--        //this.$emit('onClick', e, tinymce)-->
<!--      },-->
<!--      // 可以添加一些自己的自定义事件，如清空内容-->
<!--      clear () {-->
<!--        //this.myValue = ''-->
<!--      }-->
<!--    },-->
<!--    watch: {-->
<!--      value (newValue) {-->
<!--        // this.myValue = newValue-->
<!--      },-->
<!--      myValue (newValue) {-->
<!--        // this.$emit('input', newValue)-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style lang="scss">-->
<!--  .mod-demo-ueditor {-->
<!--    position: relative;-->
<!--    z-index: 510;-->
<!--    > .el-alert {-->
<!--      margin-bottom: 10px;-->
<!--    }-->
<!--  }-->
<!--</style>-->
